<script setup lang="ts" name="Playground">
import { ref } from 'vue'

const activeName = ref('first')

const orderStatus = [
  { name: 'all', label: '全部订单' },
  { name: 'unpay', label: '待付款' },
  { name: 'deliver', label: '待发货' },
  { name: 'receive', label: '待收货' },
  { name: 'comment', label: '待评价' },
  { name: 'complete', label: '已完成' },
  { name: 'cancel', label: '已取消' },
]
const handleClick = (con: { name: string; index: number }) => {
  console.log(con)
}
</script>

<template>
  <!-- #1 指定 v-model -->
  <XtxTabs v-model="activeName" @tab-click="handleClick">
    <!-- #2 指定 name 并接收 -->
    <XtxTabsPanel label="新闻的标题" name="first">新闻</XtxTabsPanel>
    <XtxTabsPanel v-for="item in orderStatus" :key="item.label" :name="item.name" :label="item.label">
      <h1>{{ item.name }}的内容</h1>
    </XtxTabsPanel>
  </XtxTabs>
</template>
